<template>
  <transition
    name="collapse"
    v-on="on"
  >
    <slot />
  </transition>
</template>

<script
  lang="ts"
  setup
  name="TreeTrans"
>
  // column | row
  const props = defineProps({
    direction: {
      type: String,
      default: 'column',
    },
  })

  const attr = computed(() => {
    const map = { row: 'Width', column: 'Height' }
    return map[props.direction]
  })

  const on = {
    beforeEnter(el) {
      el.style[`max${attr.value}`] = 0
    },
    enter(el) {
      if (el.scrollHeight !== 0) {
        el.style[`max${attr.value}`] = `${el[`scroll${attr.value}`]}px`
      } else {
        el.style[`max${attr.value}`] = 0
      }
      el.style.overflow = 'hidden'
    },
    afterEnter(el) {
      el.style[`max${attr.value}`] = ''
      el.style.overflow = ''
    },
    beforeLeave(el) {
      el.style[`max${attr.value}`] = `${el[`scroll${attr.value}`]}px`
      el.style.overflow = 'hidden'
    },
    leave(el) {
      if (el.scrollHeight !== 0) {
        el.style[`max${attr.value}`] = 0
      }
    },
    afterLeave(el) {
      el.style[`max${attr.value}`] = ''
    },
  }
</script>

<style scoped>
  .collapse-enter-active,
  .collapse-leave-active {
    transition: all 0.3s ease-in-out;
  }
</style>
